<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/layui/css/layui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/main.css">
	<style type="text/css">
	#main_GR{
	width: 920px;
	height: 650px;
	margin-left: 200px;
	}
	
	#show_GR{
	border:solid 1px #96c2f1;
	background:#eff7ff;
	}
	#leftGR{
	width: 430px;
	}
	#left_top{
	width: 430px;
	 height: 250px;
	}
	#left_top img{

	 width: 430px;
	 height: 250px;
	}
	#show_GR p{
	
		font-size: 20px;
	
	}
	#show_GR lable{
	color:orange;
	font-size: 20px;
	}
	#left_bottom{
	width: 430px;
	height:200px; 
	background-color: #2C2F30;
	}
	#show{
	width:450px;
	height:650px;
	position:absolute;
	top:150px;
	left: 660px;
	}
	#none{
	display: none;
	  width: 500px;
	  margin-left: 470px;
	  position: absolute;
	  top:155px;
	}
	
	 
	 #scBeiJing{
	 position: absolute;
	 top:150px;
	 margin-left: 5px;
	 }
	 
	 
	
	</style>
	
	



<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>

<body>
	<div class="header">
		<div class="menu-btn">
			<div class="menu"></div>
		</div>
		<h1 class="logo">
			<a href="index.jsp"> <span>MYBLOG</span> <img src="img/logo.png">
			</a>
		</h1>
		<div class="nav">
			<a href="index">文章</a><a href="leacots">留言</a>
			<a href="album" class="active">相册</a> <a href="about">我的文章</a>
		</div>
		<ul class="layui-nav header-down-nav">
			<li class="layui-nav-item"><a href="index">文章</a></li>
			<li class="layui-nav-item"><a href="leacots">留言</a></li>
			<li class="layui-nav-item"><a href="album.jsp">我的资料</a></li>
			<li class="layui-nav-item"><a href="about" class="active">我的文章</a></li>
			<li class="layui-nav-item"><a href="about">文章详情</a></li>
		</ul>
		<p class="welcome-text">
			欢迎<span class="name" style="color: red; font-size: 30px;">${user.u_name }</span>来到Myblog~
		</p>
	</div>



	<div id="main_GR" >
	<h2>个人资料</h2>	
	<div id="show_GR" >
	<div id="leftGR" >
	<div id="left_top" >
	<a id="scBeiJing" href="###">更换背景</a>
	<img src="img/helongLOVE.jpg" >
	</div>
	<div id="left_bottom" >
	<a href="#">
	<img title="点击更换头像" src="img/helong.png" style="width:80px;height:80px;border-radius:50px;margin-top: 60px;margin-left: 75px;">
	</a><a id="username_Span" style="font-size: 20px;color: #FFFFFF;">${user.u_name}</a>
	
</div>
	</div>
		
		<div id="show">
		
			<p>
				<lable>&nbsp;用 户 ID:</lable>&nbsp;${user.u_id}</p><br>
			<p>
			
			<p>
				<lable>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性 别:</lable>&nbsp;${user.u_gender}</p><br>
			<p>
				<lable>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年 龄:</lable>&nbsp;${user.u_age}</p><br>
			<p>
				<lable>电话号码:</lable>${user.u_phone }</p><br>
			<p>
				<lable>电子邮件:</lable>${user.u_email}</p><br>
				<p>
				<lable>个人爱好:</lable>${user.u_hobby}</p><br>
			<p>
				<lable>个人介绍:</lable>${user.u_introduction}</p><br>
			<input type="button" class="layui-btn" value="修 改" id="showbtn"
			style="margin-top: 8px;margin-left:270px;" >			
		</div>
		<div id="none" name="update" >
			<form action="updateuser" method="post" id="updatekey">
				<p>
					<lable>用 户 ID:</lable>
					<label>&nbsp;${user.u_id}</label>
				
				<p>
				<br>
				<p>
				<lable>用 户 名:</lable>&nbsp;
					<input type="text"  name="u_name" value="${user.u_name}" >
				</p>
				<br>
					<lable>密  码:</lable>
					<input type="text"  name="u_password" value="${user.u_password}"style="width:250px;height:25px; margin-left: 34px;" >
				</p>
				<br>
				<p>
					<lable>性  别:</lable>
					<span style="margin-left: 80px;">
					<label>男</label>&nbsp;<input type="radio" name="u_gender" value="男">&nbsp;&nbsp;&nbsp;
					<label>女</label>&nbsp;<input type="radio" name="u_gender" value="女">
					</span>
				</p>
				<br>
				<p>
					<lable>年  龄:</lable>
					<input type="text"  name="u_age" value="${user.u_age}" style="margin-left: 35px;">
				</p><br>
				<p>
					<lable>电话号码:</lable>
					<input type="text"  name="u_phone" value="${user.u_phone }">
				</p><br>
				<p>
					<lable>电子邮件:</lable>
					<input type="text"  name="u_email" value="${user.u_email}">
				</p><br>
				<p>
					<lable>个人爱好:</lable>
					<input type="text"  name="u_hobby" value="${user.u_hobby}">
				</p><br>
				<p>
					<lable>个人介绍:</lable>				
					 <input type="text"   name="u_introduction" value="${user.u_introduction}"> 
				 <!-- <textarea name="u_introduction" placeholder="请输入内容" >${user.u_introduction}</textarea>-->
				</p><br>
				<span style="margin-left: 100px;">				
				<input type="submit" class="layui-btn" id="reg" lay-submit lay-filter="formDemo"value="修 改"  /> 
				<input type="button" class="layui-btn" value="返 回"	id="hidebtn">
				</span>
			</form>
		</div>
	</div>
</div>

  


<script>

//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

	<script type="text/javascript"
		src="${pageContext.request.contextPath}/layui/layui.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		layui.config({
			base : '${pageContext.request.contextPath}/js/util/'
		}).use(
				[ 'element', 'laypage', 'form', 'layer', 'menu' ],
				function() {
					element = layui.element, laypage = layui.laypage,
							form = layui.form, layer = layui.layer,
							menu = layui.menu;
					laypage.render({
						elem : 'demo',
						count : 70
					//数据总数，从服务端得到
					});
					layer.photos({
						photos : '#layer-photos-demo',
						anim : 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
						,
						tab : function(pic, layero) {
							console.log(pic, layero)
						}
					});
					menu.init();
				})
	</script>
	<script type="text/javascript">
		$('#showbtn').click(function() {
			$('#show').css({
				"display" : "none"
			});
			$('#none').css({
				"display" : "block"
			});
		});

		$('#hidebtn').click(function() {
			$('#show').css({
				"display" : "block"
			});
			$('#none').css({
				"display" : "none"
			});
		});

		$(function() {
			$("#updatekey")
					.submit(
							function() {
								console.log($('input[name="u_gender"]:checked').val())
								$.post("updateuser",{"u_name" : $('input[name="u_name"]').val(),
													"u_password" : $('input[name="u_password"]').val(),
													"u_gender" : $('input[name="u_gender"]:checked').val(),
													"u_age" : $('input[name="u_age"]').val(),
													"u_phone" : $('input[name="u_phone"]').val(),
													"u_email" : $('input[name="u_email"]').val(),
													"u_introduction" : $('input[name="u_introduction"]').val(),
													"u_hobby" : $('input[name="u_hobby"]').val()
												},
												function(resp) {
													if (resp) {
														alert('xixixixixi');
														alert("修改成功！");
														location.href = "index.jsp";
													} else {
														alert("修改失败！");
														$('input[name="u_id"]')
																.val("");
														$(
																'input[name="u_password"]')
																.val("");
														$('input[name="u_id"]')
																.focus();
													}
												});
								//阻止表单的默认提交行为
								return false;
							});

		})
	</script>
</body>
</html>